new Vue({
    el: '#app',
    data:{
        message: "123465",
        name: '综合应急状况分析'
    },

    mounted() {
        this.drawLine() //
        this.netLength() // 地图
        this.echarts_0()
        this.echarts_1()
        this.echarts_3()
        this.echarts_4()
        this.echarts_5()
        this.map()
    },

    methods: {
        drawLine() {
            let myChart = echarts.init(document.getElementById('echarts_11'))
            const option = {
                tooltip: {
                    show: true,
                    formatter: '{b}：{c}个 ({d}%)'
                },
                legend: {
                    icon: 'circle',
                    itemWidth: 8,
                    bottom: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    },
                    data: ['危化企业', '加油站', '烟花爆竹']
                },
                color:['#4169E1', '#FFA500', '#D3D3D3'],
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '40%'],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    color: '#fff',
                                    fontSize: 10,
                                    show: true,
                                    position: 'outer',
                                    formatter: '{d}%'
                                }
                            },
                        },
                        data: [
                            { value: 5, name: '危化企业'},
                            { value: 74, name: '加油站'},
                            { value: 21, name: '烟花爆竹'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option)
            window.addEventListener('resize', function(){
                myChart.resize()
            })
        },

        echarts_0() {
            let myChart = echarts.init(document.querySelector("#echarts_0"))
            let option = {
                color: ['#74A6F2', '#EF702E'],
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        let str = params[0].name + '<br/>';
                        str += params[0].marker + params[0].seriesName + '：' + params[0].value +'个<br/>';
                        str += params[1].marker + params[1].seriesName + '：' + params[1].value +'立方米<br/>';
                        return str;
                    }
                },
                legend: {
                    icon: 'circle',
                    itemWidth: 8,
                    bottom: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    },
                    data:['数量','储存容量']
                },
                grid: {
                    left: 20,
                    top: 35,
                    right: "10",
                    bottom: "20%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['万安', '金山', '白马关', '新盛', '鄢家', '略坪', '调元'],
                        // 文本颜色为#4c9bfd  文字大小为 12
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 12,
                            },
                            interval:0,
                        },
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },
                    },


                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 10,
                            },
                        },
                        min: 0,
                        max: 25,
                        interval: 5,
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },
                        // 修改分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    },
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 10,
                            },
                        },
                        min: 0,
                        max: 35000,
                        interval: 5000,
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        },
                        // 修改分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    },
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '50%',
                        yAxisIndex: 0,
                        data: [8, 22, 22, 16, 16, 20, 21],
                    },
                    {
                        name: '储存容量',
                        type: 'line',
                        data: [17000, 32000, 32000, 21000, 31000, 33000, 15000],
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#FFA500', //折线点的颜色
                                lineStyle: {
                                    color: 'rgba(0,0,0,0)' //折线的颜色
                                }
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 8
                    },
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            })
        },

        echarts_1() {
            let myChart = echarts.init(document.querySelector("#echarts_1"))
            let option = {
                color: ['#FFA500'],
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}：{c}个'
                },
                grid: {
                    left: '3%',
                    top: '10%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['一级重大危险源', '二级重大危险源', '三级重大危险源', '四级重大危险源'],
                        axisLabel: {
                            color: '#fff',
                            fontSize: 10,
                            interval: 0,
                            rotate: 10
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 40,
                        interval: 5,
                        axisLabel: {
                            color: '#fff',
                            fontSize: 10
                        },
                        splitLine: {    // gird 区域中的分割线
                            show: false,   // 是否显示
                        },
                        splitArea: {     // 网格区域
                            show: false   // 是否显示，默认为false
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        barWidth: '50%',
                        data: [1, 1, 24, 37]
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            })
        },

        netLength() {
            let myChart = echarts.init(document.querySelector("#echarts_2"));
            let option = {
                color: ['#74A6F2', '#1CE7DC', '#F6B54B','#EF702E','#EC342F'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                    formatter: function (params) {
                        let str = params[0].name + '<br/>'
                        params.forEach((item) => {
                            str +=
                            item.marker +
                            item.seriesName +
                            '：' +
                            item.value +
                            '个<br/>'
                        })
                        return str
                    },
                },
                legend: {
                    y: 'bottom',
                    data: ['危化品', '加油站', '烟花爆竹'],
                    icon: 'rect',
                    itemWidth: 6,
                    itemHeight: 6,
                    itemGap: 10,
                    textStyle:{
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: 10,
                    },
                    bottom: 0

                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '10%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: 10,
                        },
                    },
                    min: 0,
                    max: 150,
                    interval: 50,
                },
                yAxis: {
                    type: 'category',
                    data: ["金山", "新盛", "略坪",  "鄢家","白马关","万安",   "调元"].reverse(),
                    axisLabel: {
                        textStyle: {
                            color: '#bac0c0',
                            fontWeight: 'normal',
                            fontSize: 10,
                        },
                    },

                },
                series: [
                    {
                        name: '危化品',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 10,
                        itemStyle:{
                            barBorderRadius: [10,0,0,10],
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [2,34, 42, 34,1,20,   20].reverse()
                    },
                    {
                        name: '加油站',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 10,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [32, 34, 23, 41,1,  20, 31].reverse()
                    },
                    {
                        name: '烟花爆竹',
                        type: 'bar',
                        stack: 'total',
                        barWidth: 10,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [82, 34, 32, 20,91,20,   1].reverse()
                    },
                ]
            };
            myChart.setOption(option)
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },

        echarts_3() {
            let myChart = echarts.init(document.querySelector('#echarts_3'))
            const option = {
                color:['#4169E1', '#FFA500', '#D3D3D3'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function (params) {
                        let str = params[0].name + '<br/>'
                        params.forEach((item) => {
                            str +=
                            item.marker +
                            item.seriesName +
                            '：' +
                            item.value +
                            '个<br/>'
                        })
                        return str
                    },
                },
                legend: {
                    y: 'bottom',
                    data: ['危化品', '加油站', '烟花爆竹'],
                    icon: 'rect',
                    itemWidth: 6,
                    itemHeight: 6,
                    itemGap: 10,
                    textStyle:{
                        color: '#bac0c0',
                        fontWeight: 'normal',
                        fontSize: 10,
                    },
                    top: 0,
                    right: 20,
                },
                grid: {
                    top: 8,
                    left: '3%',
                    right: '3%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2017', '2018', '2019', '2020', '2021'],
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 12,
                            },
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 70,
                        interval: 10,
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 12,
                            },
                        },
                        splitLine: {    // gird 区域中的分割线
                            show: false,   // 是否显示
                        },
                        splitArea: {     // 网格区域
                            show: false   // 是否显示，默认为false
                        }
                    }
                ],
                series: [
                    {
                        name: '危化品',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [10, 11, 9, 12, 15]
                    },
                    {
                        name: '加油站',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [23, 26, 28, 29, 31]
                    },
                    {
                        name: '烟花爆竹',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [8, 9, 6, 12, 13]
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            })
        },

        echarts_4() {
            let myChart = echarts.init(document.querySelector("#echarts_4"))
            let option = {
                color: ['#74A6F2', '#EF702E'],
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        let str = params[0].name + '<br/>';
                        str += params[0].marker + params[0].seriesName + '：' + params[0].value +'个<br/>';
                        str += params[1].marker + params[1].seriesName + '：' + params[1].value +'吨<br/>';
                        return str;
                    }
                },
                legend: {
                    icon: 'circle',
                    itemWidth: 8,
                    bottom: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    },
                    data:['数量','储存容量']
                },
                grid: {
                    left: 20,
                    top: 35,
                    right: "10",
                    bottom: "20%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['白马关'],
                        // 文本颜色为#4c9bfd  文字大小为 12
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 12,
                            },
                            interval:0,
                        },
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },
                    },


                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 10,
                            },
                        },
                        min: 0,
                        max: 25,
                        interval: 5,
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },
                        // 修改分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    },
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#bac0c0',
                                fontWeight: 'normal',
                                fontSize: 10,
                            },
                        },
                        min: 0,
                        // max: 35000,
                        // interval: 5000,
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        },
                        // 修改分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    },
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '50%',
                        yAxisIndex: 0,
                        data: [1]
                    },
                    {
                        name: '储存容量',
                        type: 'line',
                        data:  [26],
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: '#FFA500', //折线点的颜色
                                lineStyle: {
                                    color: 'rgba(0,0,0,0)' //折线的颜色
                                }
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 8
                    },
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            })
        },

        echarts_5() {
            let myChart = echarts.init(document.querySelector("#echarts_5"))
            let option = {
                radar: {
                    center: ['50%', '60%'],
                    splitLine: {
                        show: true, // 配置雷达图的每一圈的网格线颜色
                        lineStyle: {
                            color: '#666666',
                        },
                    },
                    splitArea: {     //配置雷达图的网格线背景
                        show: false,
                    },
                    axisLine: {     //配置雷达图的射线样式颜色
                        lineStyle: {
                            color: '#666666',
                        },
                    },
                    name: {          //配置雷达图的每个指示器的名称颜色
                        textStyle: {
                            color: '#bac0c0',
                            fontSize: 10
                        },
                    },
                    indicator: [
                        { name: '中毒', max: 6500},
                        { name: '放射性', max: 16000},
                        { name: '致癌', max: 30000},
                        { name: '腐蚀', max: 38000},
                        { name: '爆炸', max: 52000},
                        { name: '火灾', max: 25000}
                    ]
                },
                series: [{
                    // name: '预算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    itemStyle: {     //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
                        color: '#28FF28',
                    },
                    data: [
                        {
                            symbol: 'none',
                            value: [6500, 5000, 15000, 20000, 40000, 24000]
                        }
                    ]
                }]
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            })
        },

        map() {
            console.log(mapJson)
            let myChart = echarts.init(document.querySelector('#map'))
            echarts.registerMap('LJ', mapJson)
            let itemStyle={
                normal: {
                    borderColor: '#7AF1F0',
                    borderWidth: 1,
                    shadowColor: '#7AF1F0',
                    shadowBlur: 3,
                    areaColor: 'rgba(120,152,225, 0.05)',
                },
                emphasis: {
                    areaColor: 'rgba(120,152,225, 0.1)'
                },
                zoom:1.2
            }
            let color= ["#ED5454", "#FFD306", "#00DB00", "#ED5454"]
            let markPointData = [
                { name: '四川省金路树脂有限公司', coord: [ 104.518059, 31.311116 ], itemStyle: { normal: { color: colors.whp } }, address: '四川省德阳市罗江区金龙路2号',  effect: { show: true, shadowBlur: 0 } },
                { name: '德阳今天化工有限责任公司', coord: [ 104.512514, 31.320824 ], itemStyle: { normal: { color: colors.whp } }, address: '德阳市罗江区万安镇五里村十组',  effect: { show: true, shadowBlur: 0 } },

                { name: '罗江县弘迅商务服务有限公司京昆高速成绵段金山综合服务区东加油加气合建站', coord: [ 104.53, 31.35 ], itemStyle: { normal: { color: colors.jyz } }, address: '罗江区金山镇红玉村15组',  effect: { show: true, shadowBlur: 0 } },
                { name: '德阳中油德投能源有限公司罗江慧觉加油站', coord: [ 104.53, 31.34 ], itemStyle: { normal: { color: colors.jyz } }, address: '金山镇慧觉大西街58号',  effect: { show: true, shadowBlur: 0 } },
                { name: '凤鸣烟花爆竹公司', coord: [ 104.463, 31.304 ], itemStyle: { normal: { color: colors.yhbz } }, address: '罗江区白马关镇凤鸣村',  effect: { show: true, shadowBlur: 0 } },
            ]
            myChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>'
                },
                geo: {
                    show: true,
                    map: 'LJ',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            borderColor: '#4085d3',
                            // borderWidth: 1.5,
                            // shadowColor: '#000',
                            // shadowBlur: 50,
                            areaColor: 'rgba(120,152,225, 0.00',
                        },
                        emphasis: {
                            // areaColor: '#4f92fa'  //鼠标移上每一省份的颜色
                            areaColor: 'rgba(120,152,225, 0.1)',
                        }
                    }
                },
                
                series: [
                    {
                        
                        name: '香港18区人口密度',
                        type: 'map',
                        mapType: 'LJ', // 自定义扩展图表类型
                        label: {
                            show: true,
                            color:'#fff'
                        },
                        markPoint: { //图表标注。
                            symbolSize: window.subSymbolSize,
                            symbol: window.symbolPath,
                            symbolOffset: [0, '-50%'],
                            data: markPointData
                        },
                        itemStyle:itemStyle,
                    },
                   
                ]
            });
        window.addEventListener("resize",function(){
            myChart.resize();
        });
        myChart.on('click',function(params){ //点击事件
           if(params.componentType==='markPoint'){
    
           }else{
    
           }
        });
        },

        coordSwitch(strDu, strFen, strMiao, len) {
            len = (len > 6 || typeof (len) == 'undefined') ? 6 : len
            strDu = (typeof (strDu) == 'undefined' || strDu == "") ? 0 : parseFloat(strDu)
            strFen = (typeof (strFen) == 'undefined' || strFen == "") ? 0 : parseFloat(strFen) / 60
            strMiao = (typeof (strMiao) == 'undefined' || strMiao == "") ? 0 : parseFloat(strMiao) / 3600
            let digital = strDu + strFen + strMiao
            if (digital == 0) {
                return ''
            } else {
                return digital.toFixed(len)
            }
        }
    }
})

let legends = [
    {color: colors.whp,name:'危化品'},
    {color: colors.jyz,name:'加油站'},
    {color: colors.yhbz,name:'烟花爆竹'},
]
let li = '';
for(let legend of legends){
    li+=' <li> <i class="color-icon" style="background-color: '+ legend.color +';"></i>'+ legend.name +'</li>'
}
document.querySelector(".map-legend").innerHTML=li;
